<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>案件数据分析系统</title>
    <meta name="keywords" content="案件数据分析系统" />
    <meta name="description" content="案件数据分析系统" />
    <link rel="shortcut icon" href="favicon.ico" />

    <!-- 引入公共css -->
    <#include "/inc/header.ftl"/>

    <link rel="stylesheet" href="/css/leaflet.css" />
    <!-- 引入 Leaflet 脚本  -->
    <script src="/js/leaflet.js"></script>
    <link  rel="stylesheet" href="/css/leaflet-geoman.css" />
    <script src="/js/leaflet-geoman.min.js"></script>

    <style>

    </style>
</head>

<body class="gray-bg">

<div class="main-container container-fluid">
    <div class="page-container">

        <div class="clients-list">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">案件数量颜色设置</a>
                </li>
                <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">人员数量颜色设置</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <table class="table table-striped table-hover table-bordered text-center">
                        <thead>
                            <tr>
                                <th>数量</th>
                                <th>颜色</th>
                                <th>示例</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td> X≤10</td>
                                <td> #ff00004d</td>
                                <td > <div style="width: 40px;height: 40px;background-color: #ff00004d;margin: auto"></div> </td>
                            </tr>
                            <tr>
                                <td> 50≥X＞10</td>
                                <td> #ff000080</td>
                                <td > <div style="width: 40px;height: 40px;background-color: #ff000080;margin: auto"></div> </td>
                            </tr>
                            <tr>
                                <td> 100≥X＞50</td>
                                <td> #ff0000c4</td>
                                <td > <div style="width: 40px;height: 40px;background-color: #ff0000c4;margin: auto"></div> </td>
                            </tr>
                            <tr>
                                <td> X＞100</td>
                                <td> #ff0000</td>
                                <td > <div style="width: 40px;height: 40px;background-color: #ff0000;margin: auto"></div> </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="tab-2" class="tab-pane">
                    <table class="table table-striped table-hover table-bordered text-center">
                        <thead>
                        <tr>
                            <th>数量</th>
                            <th>颜色</th>
                            <th>示例</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td> X≤2</td>
                            <td> #3d00804a
                            </td>
                            <td > <div style="width: 40px;height: 40px;background-color:  #3d00804a;margin: auto"></div> </td>
                        </tr>
                        <tr>
                            <td> 5≥X＞2</td>
                            <td> #3d008085</td>
                            <td > <div style="width: 40px;height: 40px;background-color: #3d008085;margin: auto"></div> </td>
                        </tr>
                        <tr>
                            <td> 5≥X＞10</td>
                            <td> #3d0080c4</td>
                            <td > <div style="width: 40px;height: 40px;background-color: #3d0080c4;margin: auto"></div> </td>
                        </tr>
                        <tr>
                            <td> X＞10</td>
                            <td> #3d0080</td>
                            <td > <div style="width: 40px;height: 40px;background-color: #3d0080;margin: auto"></div> </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>
<!-- 引入公共js -->
<#include "/inc/footer.ftl"/>
</body>
</html>
